<template>
  <div class="topbar">
    <div class="btn"
          @click='showSideBar'>
    </div>
    <span>{{ msg }}</span>
  </div>
</template>

<script>

export default {
  data () {
    return {
      msg: '小小菜谱'
    }
  },
  methods:{
    showSideBar:function(){
      this.$dispatch('showSideBar')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>

.topbar{
  width: 100%;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  background-color: rgba(255,255,255,0.96);
  position: fixed;
  font-size: 18px;
  font-family: '微软雅黑';
  text-align: center;
  top: 0px;
  left: 0px;
  z-index: 1;
  span{
    line-height: 50px;
    text-align: center;
  }
  .btn{
    background-image: url(../assets/topBtn.png);
    background-repeat: no-repeat;
    background-position:center; 
    background-size:50% 40%; 
    height: 50px;
    width: 50px;
    position: absolute;
    left: 0;
    display: inline-block;
  }
}
.searchIcon{
    position:absolute; 
    right: 15px;
    i:before{
      font-size: 20px;
    }
}
</style>
